<template>
	<view class="bargain_item_item">
		<view class="item_up_box" v-if="item.isTimeOut">
			砍价已超时
		</view>
	    <view class="item_up_box" v-else>
	    	正在进行中..
	    </view>
		<view class="item_down_box">
			<image :src="item.img" mode="fill"></image>
			<view class="bargain_content">
				<!-- 价格 -->
				<view class="bargain_price">
					已砍<text>{{ item.hasCutMoney }}</text>元，仅差<text>{{ item.cutBalance }}</text>元
				</view>
				<!-- 进度条 -->
				<progress :percent="item.progress" :border-radius="50" backgroundColor="#f7f7f7" activeColor="#ff3682" />
				<!-- 时间 -->
				<view class="bargain_time">
					<view>{{ countdownHour }}</view>
					<text>:</text>
					<view>{{ countdownMinute }}</view>
					<text>:</text>
					<view>{{ countdownSecond }}</view>
					后结束
				</view>
				<!-- 继续砍价 -->
				<view v-if="!item.isTimeOut" class="bargain_continue" @click="onPageJump">
					{{ item.cutBalance > 0 ? '继续砍价' : '立即下单' }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				// type: Object,
				default () {
					return {};
				}
			},
			index: {
				type: Number,
				default () {
					return 0;
				}
			}
		},
        data(){
            return {
                countdownHour: 0,
                countdownMinute: 0,
                countdownSecond: 0,
                clearTime: null
            }
        },
        created(){
            this.getCountdown();
        },
		methods: {
			onPageJump() {
				uni.navigateTo({
					url: "/pages/bargain/bargainInitiate?cutNo=" + this.item.cutNo
				});
			},
            //倒计时
            getCountdown(){
            	let spikeEndTime = this.item.endTime.replace(/-/g, '/');
            	let endTime = new Date(spikeEndTime).getTime();
            	const _this = this;
                this.clearTime && clearTimeout(this.clearTime);
            	recursion();
            	function recursion() {
            	    let currentTime = new Date().getTime();
                    if(endTime > currentTime){
                        let surplus = (endTime - currentTime) / 1000;
                        let hour = parseInt(surplus / 3600);
                        let minute = parseInt((surplus - hour * 3600) / 60);
                        let second = parseInt(surplus - hour * 3600 - minute * 60);
                        if (hour < 10) {
                            hour = '0' + hour;
                        }
                        if (minute < 10) {
                            minute = '0' + minute;
                        }
                        if (second < 10) {
                            second = '0' + second;
                        }
                        _this.countdownHour = hour;
                        _this.countdownMinute = minute;
                        _this.countdownSecond = second;
                        _this.clearTime = setTimeout(() => {
                            recursion();
                        }, 1000);
                    } else {
                        _this.countdownHour = "00";
                        _this.countdownMinute = "00";
                        _this.countdownSecond = "00";
                    }
            	}
            },
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.bargain_item_item {
		margin: 24rpx 32rpx;
	
		.item_up_box {
			height: 64rpx;
			background-color: $viceColor2;
			border-radius: 20rpx 20rpx 0px 0px;
			text-align: center;
			line-height: 64rpx;
			font-size: 28rpx;
			color: #333333;
		}
	
		.item_down_box {
			padding: 24rpx;
			//height: 264rpx;
			background-color: #fff;
			border-radius: 0px 0px 20rpx 20rpx;
			display: flex;
	
			//align-items: center;
			//justify-content: space-between;
			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 8rpx;
			}
	
			.bargain_content {
				margin-left: 32rpx;
	
				.bargain_price {
					font-size: 28rpx;
					color: #333333;
	
					text {
						color: #ff403f;
					}
				}
	
				>progress {
					margin-top: 18rpx;
					height: 12rpx;
					width: 358rpx;
	
					/deep/ .uni-progress-bar {
						// 这主要是加上deep才能改变它原来的样式 
						border-radius: 10rpx !important;
	
						.uni-progress-inner-bar {
							border-radius: 10rpx !important;
						}
					}
				}
	
				.bargain_time {
					margin-top: 20rpx;
					font-size: 24rpx;
					color: #333333;
					display: flex;
					align-items: center;
	
					view {
						margin: 8rpx;
						text-align: center;
						line-height: 42rpx;
						//padding: 5rpx;
						min-width: 38rpx;
						height: 42rpx;
						background-color: #333333;
						border-radius: 8rpx;
						color: #fff;
	
						&:nth-child(1) {
							margin-left: 0;
						}
					}
				}
	
				.bargain_continue {
					margin-top: 20rpx;
					width: 358rpx;
					height: 62rpx;
					@include theme('gradient_bg');
					//box-shadow: 0px 4rpx 8rpx 0px rgba(123, 0, 0, 0.2);
					border-radius: 50rpx;
					text-align: center;
					line-height: 62rpx;
					color: #fff;
					font-size: 28rpx;
	
				}
			}
	
		}
	
	}
</style>
